<script setup lang="ts">
import { onMounted, ref, computed } from 'vue'
import { useRecommendHook } from '@/store/modules/recommend'
import MusicTitle from '@/components/common/MusicTitle.vue'
import FlexPlaylist from '@/components/common/FlexPlaylist.vue'
import MusicSwiper from '@/views/individuation/Comp/MusicSwiper.vue'
import NewMusic from '@/views/individuation/Comp/NewMusic.vue'

const recommendStore = useRecommendHook()
onMounted(() => {
  recommendStore.initRecommendData()
})

const titleInfo = ref({
  title: '推荐歌单',
  path: '/'
})
const hotTitleInfo = ref({
  title: '热门歌单',
  path: '/'
})

const newTitleInfo = ref({
  title: '新品歌单',
  path: '/'
})

const recommendList = computed(() => recommendStore.recommendList)

const hotPlaylist = computed(() => recommendStore.hotPlaylist.slice(0, 10))
const newPlaylist = computed(() => recommendStore.newPlaylist.slice(0, 10))
</script>

<template>
  <div>
    <MusicSwiper />
    <MusicTitle :title-info="titleInfo" />
    <FlexPlaylist :playlist="recommendList" />
    <!-- 热门歌单 -->
    <template v-if="hotPlaylist.length > 0">
      <MusicTitle :title-info="hotTitleInfo" />
      <FlexPlaylist :playlist="hotPlaylist" />
    </template>
    <!-- 最新歌单 -->
    <template v-if="newPlaylist.length > 0">
      <MusicTitle :title-info="newTitleInfo" />
      <FlexPlaylist :playlist="newPlaylist" />
    </template>
    <NewMusic />
  </div>
</template>

<style lang="scss" scoped>
.recommend_container {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  .recommend_box {
    width: 18%;
    height: auto;
    margin-bottom: 20px;
    margin-right: 2.5%;
    position: relative;
    &:nth-child(5n) {
      margin-right: 0;
    }
    p {
      margin-top: 12px;
      font-size: 14px;
      cursor: pointer;
      color: var(--music-link-color);
      &:hover {
        color: var(--music-link-hover-color);
      }
    }
    .daily_song {
      transform: scale(1.5);
      filter: blur(20px);
    }
  }
}
</style>
